<template>
  <div class="model-page">
    <div class="page-full-allComment">
      <!-- 顶部 -->
      <topHeader :show-left='true' :show-right='true' title="所有评论"></topHeader>

      <ul class="mComment_list">
        <li v-for="(i,idx) in fetch_data" :key="'cmt_'+idx">
          <div class="c_user">
            <div class="left">
              <span class="name">{{i.user_name}}</span>
              <div class="stars">
                <i v-for="(si,sidx) in starClass(i.score,'i_star_on','i_star_half','i_star_gray')" :class="si" :key="'level'+sidx"></i>
              </div>
              <span class="num">{{i.score}}分</span>
            </div>
            <span class="right">已购买：{{i.project_name}}</span>
          </div>
          <p class="c_des">{{i.content}}</p>
        </li>
      </ul>

      <footer class="footer_page_wrapper">
        <a class="c_forward c_pre" @click="prePage()"></a>
        <a class="c_guide"  @click="prePage()">上一页</a>
        <a class="c_line"></a>
        <a class="c_guide" @click="nextPage()">下一页</a>
        <a class="c_forward c_next" @click="nextPage()"></a>
      </footer>
    
    </div>
  </div>
</template>

<script>
import topHeader from '@/components/topHeader'
import tool from '@/assets/js/tool.js'
export default {
  components:{
    topHeader,
  },
  data() {
    return {
      fetch_data:'',
      page:1,
      page_size:10,
      mid:this.$route.query.mid,
      isPre:false,
      isNext:false,
    };
  },
  created() {
    this.$store.commit('changePageLoading',true);
    this.fetch_page();
  },
  mounted() {},
  computed: {},
  methods: {
    starClass(level,on,half,gray){
      return tool.starClass(level,on,half,gray);
    },
    fetch_page(page){
      var params = {
        page:this.page,
        page_size:this.page_size,
        mid:this.mid
      }
      this.$fetch.post('/app/Jmyc/user_pl_list',params).then((res)=>{
        if(res.code==200){
          this.fetch_data = res.data.data;
          this.$store.commit('changePageLoading',false);
        }
      });
    },
    prePage(){
      this.isPre = true;
      this.page--;
      this.fetch_page(this.page);
    },
    nextPage(){
      this.isNext = true;
      this.page++;
      this.fetch_page(this.page);
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../assets/css/public.less";
@import "../../assets/css/tml_base.less";
@import "./index.less";
</style>